<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '促销活动管理'}, {name: '活动列表'}]"></v-breadcrumb>

        <div class="search-box mb-15">
            <div class="left">
                <div class="item">
                    <span class="span">状态</span>
                    <el-select v-model="obj.status" class="width-200" placeholder="请选择" @change="getData()">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option v-for="(item,index) in promotionStatuses" :key="index"
                                   v-if="!item.selectHidden"
                                   :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="item">
                    <span class="span">类型</span>
                    <el-select v-model="obj.type" class="width-200" placeholder="请选择" @change="getData()">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option v-for="(item,index) in promotionTypes" :key="index"
                                   :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="right">
                <el-button-group>
                    <el-button v-preventDbClick @click="getData()" type="primary" icon="el-icon-search">查询</el-button>
                    <el-button v-preventDbClick @click="reset()" type="primary" icon="el-icon-refresh">重置</el-button>
                </el-button-group>
            </div>
        </div>

        <div class="g-box" style="min-height:600px;">
            <div class="flex-center flex-between">
                <el-button v-preventDbClick icon="el-icon-plus" type="primary" class="mb-15 width-100"
                           @click="gotoPage('/promotion/add')">新建
                </el-button>
                <div></div>
            </div>
            <el-table :data="list" :fit="true" stripe border :header-cell-style="{background:'#eee'}">
                <el-table-column prop="id" label="ID" width="110"></el-table-column>
                <el-table-column label="类型" width="110">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick v-for="(item,index) in promotionTypes" :key="index"
                                   v-if="scope.row.type==item.id"
                                   plain size="mini" :type="item.type">
                            {{ item.name }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="商品图" width="66">
                    <template slot-scope="scope">
                        <el-image
                            style="font-size:0;width:44px;height:44px;margin:0;padding:0;position:relative;top:3px;"
                            fit="cover"
                            :preview-src-list="[scope.row.goods_image]"
                            :src="scope.row.goods_image">
                            <div slot="error" style="width:100%;height:100%;border:1px solid #eee;font-size:0;"
                                 class="image-slot color-999 font12 flex-center">暂无<br/>图片
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <div style="max-width:200px" class="t-hidden">{{ scope.row.goods_name }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_price" label="商品原价" width="100"></el-table-column>
                <el-table-column prop="promotion_price" label="活动价" width="100"></el-table-column>
                <el-table-column label="已售/限额" width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sales }} / {{ scope.row.sale_limit || '不限' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="合伙人" width="200">
                    <template slot-scope="scope">
                        <div style="max-width:180px" v-if="scope.row.partner_nickname" class="flex-center flex-start">
                            <el-image
                                style="font-size:0;width:44px;height:44px;margin:0;padding:0;position:relative;top:3px;"
                                fit="cover"
                                :preview-src-list="[scope.row.partner_image]"
                                :src="scope.row.partner_image">
                            </el-image>
                            <span class="ml-5 t-hidden" style="flex:1;width:0;">{{ scope.row.partner_nickname }}</span>
                        </div>
                        <div v-if="!scope.row.partner_nickname">无</div>
                    </template>
                </el-table-column>
                <el-table-column label="时间" width="166">
                    <template slot-scope="scope">
                        <div>{{ scope.row.start_time|formatDateTime }}</div>
                        <div>{{ scope.row.end_time|formatDateTime }}</div>
                    </template>
                </el-table-column>
                <!--        <el-table-column prop="sort" label="排序" width="70"></el-table-column>-->
                <el-table-column label="状态" width="140" fixed="right">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick v-for="(item,index) in promotionStatuses" :key="index"
                                   v-if="scope.row.status==item.id"
                                   plain size="mini" :type="item.type">
                            {{ item.name }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" border width="140" label="操作">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" title="详情"
                                   @click="gotoPage('/promotion/detail?id='+scope.row.id)"
                                   v-if="scope.row.status>1"
                                   type="primary" icon="el-icon-view" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="编辑"
                                   @click="gotoPage('/promotion/add?id='+scope.row.id)"
                                   v-if="scope.row.status==1"
                                   type="info" icon="el-icon-edit-outline" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="活动开始" @click="start(scope.row)"
                                   v-if="scope.row.status==1"
                                   type="success" icon="el-icon-check" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="删除" v-if="scope.row.status==1"
                                   @click="del(scope.row.id)" type="warning" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="clearfix"></div>
            <div class="mb-10 mt-20 t-center">
                <el-pagination background layout="total,sizes,prev,pager,next,jumper"
                               :page-size="obj.size"
                               :page-sizes="[10,20,50,100]"
                               :current-page.sync="obj.page"
                               :total="total"
                               @size-change="changeSize"
                               @current-change="changeCurrent">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            obj: {status: 0, type: 0, page: 1, size: 10},
            total: 0,
            list: [],
            promotionStatuses: config.promotionStatuses,
            promotionTypes: config.promotionTypes
        };
    },

    computed: {},

    created() {
        this.obj.status = !!this.$route.query.status ? Number(this.$route.query.status) : 0;
        this.getData();
    },

    methods: {
        start(item) {
            this.$confirm('确定要上线活动吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/promotion/start',
                    data: {id: item.id}
                }).then((res) => {
                    let msg = item.is_partner == 1 ? '请提醒合伙人购买' : res.msg;
                    tool.message(msg, 'success', () => {
                        this.getData(true);
                    })
                })
            });
        },

        del(id) {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/promotion/del',
                    data: {id: id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            });
        },

        getData(page) {
            this.obj.page = !!page ? this.obj.page : 1;
            request({
                url: '/manage/promotion/list',
                data: this.obj
            }).then((res) => {
                this.list = res.data.data;
                this.total = res.data.total;
            })
        },

        reset() {
            this.obj.page = 1;
            this.obj.size = 10;
            this.obj.type = 0;
            this.obj.status = 0;
            this.getData();
        },

        changeCurrent(val) {
            this.obj.page = val;
            this.getData(true);
        },

        changeSize(e) {
            this.obj.size = e;
            this.obj.page = 1;
            this.getData();
        },

    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");
</style>
